<!--  -->
<template>
  <div id="app">
    <el-table v-loading="loading" :data="filterData">
      <el-table-column prop="date" label="时间" width="180"></el-table-column>
      <el-table-column prop="name" label="名称" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5,10,20]"
      layout="prev, pager, next, sizes"
      :total="tableData.length">
    </el-pagination>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  name:"App",
  components: {},
  data() {
    //这里存放数据
    return {
      loading:true,
      tableData:[
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎7",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎8",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎9",
          address: "上海市普陀区金沙江路 1518 弄",
        },{
          date: "2016-05-02",
          name: "王小虎10",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎11",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎12",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎13",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎14",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎15",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎16",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎17",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎18",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎19",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          date: "2016-05-02",
          name: "王小虎20",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      pageNum: 1 ,
      pageSize:5
    };
  },
  //监听属性 类似于data概念
  computed: {
    filterData:function(){
      let filterData = this.tableData.slice(
        (this.pageNum - 1 ) * this.pageSize,
        this.pageNum * this.pageSize
      )
      return filterData;
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSizeChange:function(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize
    },
    handleCurrentChange:function(pageNum){
      console.log("当前页面",pageNum);
      this.pageNum = pageNum
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    setTimeout(function(){
      _this.loading = false;
    },5000)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>